<template>
  <div class="stock-out">
    <div class="operation-header">
      <div class="header-info">
        <h4>药品出库管理</h4>
        <span class="operation-date">出库日期: {{ currentDate }}</span>
      </div>
      <div class="header-actions">
        <button class="primary-btn" @click="newStockOut">新建出库单</button>
        <button class="secondary-btn" @click="batchStockOut">批量出库</button>
      </div>
    </div>

    <!-- 出库申请列表 -->
    <div class="requests-section">
      <h5>出库申请单</h5>
      <table class="data-table">
        <thead>
          <tr>
            <th width="30"><input type="checkbox" @change="selectAll"></th>
            <th width="100">申请单号</th>
            <th width="100">申请部门</th>
            <th width="80">申请人</th>
            <th width="80">申请日期</th>
            <th width="60">药品种类</th>
            <th width="80">状态</th>
            <th width="120">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="request in stockOutRequests" :key="request.id">
            <td><input type="checkbox" :value="request.id"></td>
            <td>{{ request.requestNo }}</td>
            <td>{{ request.department }}</td>
            <td>{{ request.applicant }}</td>
            <td>{{ request.requestDate }}</td>
            <td>{{ request.drugCount }}</td>
            <td>
              <span class="status-badge" :class="request.status">
                {{ request.statusText }}
              </span>
            </td>
            <td>
              <button class="action-btn" @click="viewRequest(request.id)">查看</button>
              <button class="action-btn" @click="approveStockOut(request.id)" v-if="request.status === 'pending'">审批</button>
              <button class="action-btn" @click="processStockOut(request.id)" v-if="request.status === 'approved'">出库</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 快速出库 -->
    <div class="quick-stockout">
      <h5>紧急出库</h5>
      <div class="quick-form">
        <div class="form-row">
          <div class="form-group">
            <label>药品名称:</label>
            <input type="text" v-model="quickForm.drugName" placeholder="输入药品名称或扫描条码">
          </div>
          <div class="form-group">
            <label>出库数量:</label>
            <input type="number" v-model="quickForm.quantity" placeholder="出库数量">
          </div>
          <div class="form-group">
            <label>出库原因:</label>
            <select v-model="quickForm.reason">
              <option value="">选择原因</option>
              <option value="销售">正常销售</option>
              <option value="调拨">部门调拨</option>
              <option value="报损">药品报损</option>
              <option value="退货">供应商退货</option>
              <option value="过期">过期处理</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>接收部门:</label>
            <select v-model="quickForm.department">
              <option value="">选择部门</option>
              <option value="药房">药房</option>
              <option value="门诊">门诊部</option>
              <option value="住院部">住院部</option>
              <option value="急诊科">急诊科</option>
            </select>
          </div>
          <div class="form-group">
            <label>经办人:</label>
            <input type="text" v-model="quickForm.operator" placeholder="经办人姓名">
          </div>
          <div class="form-group">
            <label>备注:</label>
            <input type="text" v-model="quickForm.remark" placeholder="备注信息">
          </div>
        </div>
        <div class="form-actions">
          <button class="primary-btn" @click="quickStockOut">确认出库</button>
          <button class="secondary-btn" @click="clearQuickForm">清空</button>
        </div>
      </div>
    </div>

    <!-- 库存不足预警 -->
    <div class="shortage-warning">
      <h5>库存不足预警</h5>
      <table class="data-table">
        <thead>
          <tr>
            <th>药品名称</th>
            <th>当前库存</th>
            <th>安全库存</th>
            <th>预计可用天数</th>
            <th>建议操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="warning in shortageWarnings" :key="warning.id">
            <td>{{ warning.drugName }}</td>
            <td style="color: #e74c3c; font-weight: bold;">{{ warning.currentStock }}</td>
            <td>{{ warning.safeStock }}</td>
            <td>{{ warning.estimatedDays }}天</td>
            <td>
              <button class="action-btn danger">紧急采购</button>
              <button class="action-btn">暂停出库</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 今日出库统计 -->
    <div class="today-stats">
      <h5>今日出库统计</h5>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">{{ todayStats.requestCount }}</div>
          <div class="stat-label">出库申请</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ todayStats.completedCount }}</div>
          <div class="stat-label">已完成</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ todayStats.totalQuantity }}</div>
          <div class="stat-label">出库数量</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">¥{{ todayStats.totalValue.toLocaleString() }}</div>
          <div class="stat-label">出库价值</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const currentDate = ref(new Date().toLocaleDateString('zh-CN'))

// 出库申请数据
const stockOutRequests = ref([
  {
    id: 'OUT001',
    requestNo: 'CK20240115001',
    department: '门诊部',
    applicant: '王医生',
    requestDate: '2024-01-15',
    drugCount: 3,
    status: 'pending',
    statusText: '待审批'
  },
  {
    id: 'OUT002',
    requestNo: 'CK20240115002',
    department: '住院部',
    applicant: '李护士',
    requestDate: '2024-01-15',
    drugCount: 5,
    status: 'approved',
    statusText: '已审批'
  },
  {
    id: 'OUT003',
    requestNo: 'CK20240114001',
    department: '急诊科',
    applicant: '张医生',
    requestDate: '2024-01-14',
    drugCount: 2,
    status: 'completed',
    statusText: '已完成'
  }
])

// 快速出库表单
const quickForm = ref({
  drugName: '',
  quantity: '',
  reason: '',
  department: '',
  operator: '',
  remark: ''
})

// 库存不足预警
const shortageWarnings = ref([
  {
    id: 'W001',
    drugName: '阿莫西林胶囊',
    currentStock: 15,
    safeStock: 50,
    estimatedDays: 3
  },
  {
    id: 'W002',
    drugName: '维生素B复合片',
    currentStock: 8,
    safeStock: 30,
    estimatedDays: 1
  }
])

// 今日统计
const todayStats = ref({
  requestCount: 8,
  completedCount: 6,
  totalQuantity: 156,
  totalValue: 4850
})

// 方法
const newStockOut = () => alert('新建出库单')
const batchStockOut = () => alert('批量出库')
const selectAll = (event: Event) => {
  const target = event.target as HTMLInputElement
  const checkboxes = document.querySelectorAll('.data-table tbody input[type="checkbox"]')
  checkboxes.forEach((cb: any) => cb.checked = target.checked)
}
const viewRequest = (requestId: string) => alert(`查看申请单: ${requestId}`)
const approveStockOut = (requestId: string) => alert(`审批出库: ${requestId}`)
const processStockOut = (requestId: string) => alert(`处理出库: ${requestId}`)
const quickStockOut = () => {
  if (!quickForm.value.drugName || !quickForm.value.quantity || !quickForm.value.reason) {
    alert('请填写必要信息')
    return
  }
  alert('紧急出库成功')
  clearQuickForm()
}
const clearQuickForm = () => {
  quickForm.value = {
    drugName: '',
    quantity: '',
    reason: '',
    department: '',
    operator: '',
    remark: ''
  }
}
</script>

<style scoped>
.stock-out {
  font-size: 12px;
}

.operation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border: 1px solid #ddd;
  padding: 10px 15px;
  margin-bottom: 10px;
}

.header-info h4 {
  margin: 0 0 2px 0;
  color: #333;
}

.operation-date {
  font-size: 11px;
  color: #666;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.primary-btn, .secondary-btn {
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  border: none;
}

.primary-btn {
  background: #3498db;
  color: white;
}

.primary-btn:hover {
  background: #2980b9;
}

.secondary-btn {
  background: white;
  border: 1px solid #bdc3c7;
  color: #333;
}

.secondary-btn:hover {
  background: #e8f4f8;
  border-color: #3498db;
}

.requests-section, .quick-stockout, .shortage-warning, .today-stats {
  background: white;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.requests-section h5, .quick-stockout h5, .shortage-warning h5, .today-stats h5 {
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
  padding: 8px 15px;
  margin: 0;
  font-size: 13px;
  color: #333;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.data-table th {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 6px 8px;
  text-align: left;
  font-weight: bold;
  font-size: 11px;
  color: #666;
}

.data-table td {
  border: 1px solid #ddd;
  padding: 4px 8px;
  vertical-align: top;
}

.data-table tr:nth-child(even) {
  background: #f9f9f9;
}

.data-table tr:hover {
  background: #e8f4f8;
}

.status-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: bold;
  color: white;
}

.status-badge.pending {
  background: #f39c12;
}

.status-badge.approved {
  background: #3498db;
}

.status-badge.completed {
  background: #27ae60;
}

.action-btn {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline;
  font-size: 11px;
  padding: 2px 4px;
  margin-right: 5px;
}

.action-btn:hover {
  color: #2980b9;
}

.action-btn.danger {
  color: #e74c3c;
}

.action-btn.danger:hover {
  color: #c0392b;
}

.quick-form {
  padding: 15px;
}

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

.form-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
}

.form-group label {
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  width: 80px;
}

.form-group input, .form-group select {
  flex: 1;
  border: 1px solid #ddd;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.form-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 15px;
}

.stat-item {
  text-align: center;
  padding: 10px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
}

.stat-label {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}
</style> 